import React, { Component } from 'react';
// import { request } from '../util/commons-tools';
class Config extends Component {
    constructor(props) {
        super(props);
        this.state = {
            disabled: true,
            clearName: "解锁"
        };
    }
    componentDidMount() {
        let properties = JSON.parse(window.localStorage.getItem("properties"))
        console.log(properties)
        if (properties) {
            if (properties.TermNo && properties.host && properties.port && properties.mqHost && properties.mqPort && properties.branchNo && properties.windowNo) {
                this.refs.TermNo.value = properties.TermNo;
                this.refs.branchNo.value = properties.branchNo;
                this.refs.host.value = properties.host;
                this.refs.port.value = properties.port;
                this.refs.mqHost.value = properties.mqHost;
                this.refs.mqPort.value = properties.mqPort;
                this.refs.windowNo.value = properties.windowNo;

                this.timeout = setTimeout(() => {
                    this.onSave();
                }, 3000);
            }
        } else {
            this.setState({
                disabled: false,
                clearName: "清除"
            })
        }
    }

    componentWillUnmount() {
        clearInterval(this.timeout)
    }

    onSave = () => {
        if (this.refs.TermNo && this.refs.host && this.refs.port && this.refs.mqHost && this.refs.mqPort && this.refs.windowNo) {
            if (this.refs.TermNo.value && this.refs.host.value && this.refs.port.value && this.refs.mqHost.value && this.refs.mqPort.value && this.refs.windowNo.value) {
                let properties =
                {
                    "TermNo": this.refs.TermNo.value,
                    "TxCode": "",
                    "branchNo": this.refs.branchNo.value,
                    "host": this.refs.host.value,
                    "port": this.refs.port.value,
                    "mqHost": this.refs.mqHost.value,
                    "mqPort": this.refs.mqPort.value,
                    "windowNo": this.refs.windowNo.value
                }

                window.localStorage.setItem("properties", JSON.stringify(properties))
                console.log("properties",properties);
                // request(properties, (e) => {
                //     console.log(e)
                //     this.props.isConfig(false)
                // })
                this.props.isConfig(false)
            } else {
                alert("请检查各参数是否录入")
            }
        }
    }
    onClear = () => {
        if (this.state.disabled) {
            clearTimeout(this.timeout);
            this.setState({
                disabled: false,
                clearName: "清除",
            });
        } else {
            this.refs.TermNo.value = "";
            this.refs.branchNo.value = "";
            this.refs.host.value = "";
            this.refs.port.value = "";
            this.refs.mqHost.value = "";
            this.refs.mqPort.value = "";
            this.refs.windowNo.value = "";
        }
    }

    render() {

        return (
            <div className="config">
                <div className="title">系统设置</div>
                <input type="text" className="input" placeholder="请输入设备编号" ref="TermNo" disabled={this.state.disabled} />
                <input type="text" className="input" placeholder="请输入机构编号" ref="branchNo" disabled={this.state.disabled} />
                <input type="text" className="input" placeholder="请输入服务端IP" ref="host" disabled={this.state.disabled} />
                <input type="text" className="input" placeholder="请输入服务端Port" ref="port" disabled={this.state.disabled} />
                <input type="text" className="input" placeholder="请输入MQ服务端IP" ref="mqHost" disabled={this.state.disabled} />
                <input type="text" className="input" placeholder="请输入MQ服务端IPort" ref="mqPort" disabled={this.state.disabled} />
                <input type="text" className="input" placeholder="请输入窗口号(非叫号屏请输入“0”)" ref="windowNo" disabled={this.state.disabled} />
                <div className="button">
                    <button style={{ "background": "#8DC328" }} onClick={this.onSave}>确定</button>
                    <button style={{ "background": "#FCA124", }} onClick={this.onClear}>{this.state.clearName}</button>
                </div>
            </div>

        );
    }
}

export default Config;
